<template>
  <div class="router-view-container">
    <router-view />
  </div>
  <LoginModal />
  <SignupModal />
</template>

<script setup>
import { onMounted } from 'vue'
import './assets/css/global.css'
import LoginModal from '@/components/LoginModal.vue'
import SignupModal from '@/components/SignupModal.vue'
import { useUserStore } from '@/stores/user'
import { getToken } from '@/utils/http/tokenManager'

// 获取用户store
const userStore = useUserStore()

onMounted(() => {
  // 初始化用户信息
  initUserInfo()
  
  // 确保页面可滚动
  document.body.style.overflow = 'auto'
})

// 初始化用户信息
const initUserInfo = async () => {
  const token = getToken()
  try {
    await userStore.loadUser()
    console.log('用户信息加载成功')
  } catch (error) {
    console.error('加载用户信息失败:', error)
  }
}
</script>

<style>
/* 重写全局样式 */
#app {
  max-width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  height: 100%;
  display: block !important;
}

/* 设置根字体大小，作为rem单位的基准 - 默认14寸屏幕 */
:root {
  font-size: 16px;
}
/* 定义滚动条的宽度 */
::-webkit-scrollbar {
    width: 8px; /* 滚动条的宽度 */
}

/* 定义滚动条的轨道（背景） */
::-webkit-scrollbar-track {
    background: none; /* 轨道背景颜色 */
    border-radius: 8px; /* 轨道圆角 */
}

/* 定义滚动条的滑块 */
::-webkit-scrollbar-thumb {
    background: #aaa; /* 滑块颜色 */
    border-radius: 10px; /* 滑块圆角 */
}

/* 定义滚动条滑块在悬停时的样式 */
::-webkit-scrollbar-thumb:hover {
    background: #1a1a1a; /* 悬停时滑块颜色 */
}
/* 为不同尺寸显示器设置不同的根字体大小 */
/* 15寸显示器 - 约1400×900像素 */
@media screen and (min-width: 1366px) and (max-width: 1440px) {
  :root {
    font-size: 17px;
  }
}

/* 16寸显示器 - 约1600×1000像素 */
@media screen and (min-width: 1441px) and (max-width: 1680px) {
  :root {
    font-size: 18px;
  }
}

/* 24寸显示器 - 约1920×1080像素 */
@media screen and (min-width: 1681px) and (max-width: 1920px) {
  :root {
    font-size: 20px;
  }
}

/* 27寸显示器 - 约2560×1440像素 */
@media screen and (min-width: 1921px) and (max-width: 2560px) {
  :root {
    font-size: 22px;
  }
}

/* 32寸显示器 - 约3840×2160像素及以上 */
@media screen and (min-width: 2561px) {
  :root {
    font-size: 24px;
  }
}

@media (min-width: 1024px) {
  body {
    display: block !important;
    place-items: normal !important;
  }

  #app {
    display: block !important;
    grid-template-columns: none !important;
    padding: 0 !important;
  }
}

/* 全局样式 */
html, body {
  margin: 0 !important;
  padding: 0 !important;
  background-color: #000 !important;
  color: #fff !important;
  min-height: 100vh !important;
  width: 100% !important;
  /* 允许正常滚动 */
  overflow-x: hidden !important;
  overflow-y: auto !important;
  position: relative;
}

/* 路由视图容器样式 */
.router-view-container {
  width: 100%;
  min-height: 100vh;
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
</style>
